<template>
  <div class="topic-detail-page">
    <div class="container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="15" animated />
      </div>

      <!-- 话题内容区 -->
      <div v-else>
        <!-- 导航面包屑 -->
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/forum' }">论坛首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: `/forum/boards/${topic.boardId}` }">{{ topic.boardName }}</el-breadcrumb-item>
            <el-breadcrumb-item>话题详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 话题主体 -->
        <div class="topic-main">
          <!-- 话题头部 -->
          <div class="topic-header">
            <h1 class="topic-title">
              <span v-if="topic.isTop" class="tag top">置顶</span>
              <span v-if="topic.isEssence" class="tag essence">精华</span>
              {{ topic.title }}
            </h1>
            <div class="topic-meta">
              <div class="author-info">
                <div class="author-avatar">
                  <img v-if="topic.author.avatar" :src="getFullAvatarURL(topic.author.avatar)" :alt="topic.author.name">
                  <div class="avatar-placeholder" v-else>{{ topic.author.name.substring(0, 1) }}</div>
                </div>
                <div class="author-detail">
                  <div class="author-name">{{ topic.author.name }}</div>
                  <div class="publish-time">发布于：{{ topic.publishTime }}</div>
                </div>
              </div>
              <div class="topic-stats">
                <div class="stat">
                  <el-icon><view /></el-icon>
                  <span>{{ topic.views }}次浏览</span>
                </div>
                <div class="stat">
                  <el-icon><chat-line-round /></el-icon>
                  <span>{{ topic.replies }}条回复</span>
                </div>
                <div class="stat">
                  <el-icon><star /></el-icon>
                  <span>{{ topic.votes }}人赞</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 话题内容 -->
          <div class="topic-content" v-html="topic.content"></div>

          <!-- 话题操作 -->
          <div class="topic-actions">
            <el-button 
              :type="topic.isVoted ? 'success' : 'default'" 
              @click="handleVoteTopic"
            >
              <el-icon><star /></el-icon>
              {{ topic.isVoted ? '已赞' : '点赞' }} ({{ topic.votes }})
            </el-button>
            <el-button @click="scrollToReplyForm">
              <el-icon><chat-line-round /></el-icon>
              回复
            </el-button>
            <el-button v-if="isAuthor || isAdmin" @click="editTopic">
              <el-icon><edit /></el-icon>
              编辑
            </el-button>
            <el-button v-if="isAuthor || isAdmin" type="danger" @click="confirmDeleteTopic">
              <el-icon><delete /></el-icon>
              删除
            </el-button>
          </div>
        </div>

        <!-- 回复列表 -->
        <div class="replies-container">
          <div class="section-header">
            <h2 class="section-title">全部回复 ({{ topic.replies }})</h2>
            <div class="filter">
              <el-radio-group v-model="replySort" size="small">
                <el-radio-button label="time">按时间</el-radio-button>
                <el-radio-button label="hot">按热度</el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <!-- 回复列表 -->
          <div class="reply-list" v-if="replies.length > 0">
            <div 
              v-for="(reply, index) in replies" 
              :key="reply.id" 
              class="reply-item"
              :id="`reply-${reply.id}`"
            >
              <div class="reply-author">
                <div class="author-avatar">
                  <img v-if="reply.author && reply.author.avatar" :src="getFullAvatarURL(reply.author.avatar)" :alt="reply.author.name">
                  <div class="avatar-placeholder" v-else>{{ reply.author ? reply.author.name.substring(0, 1) : '匿名' }}</div>
                </div>
                <div class="author-detail">
                  <div class="author-name">{{ reply.author ? reply.author.name : '匿名用户' }}</div>
                  <div class="reply-time">{{ reply.publishTime }}</div>
                </div>
              </div>
              
              <div class="reply-body">
                <!-- 引用的回复 -->
                <div class="quoted-reply" v-if="reply.parentId && reply.quoted">
                  <div class="quoted-author">
                    引用 {{ reply.quoted.author?.name || '已删除用户' }} 的回复：
                  </div>
                  <div class="quoted-content" v-html="reply.quoted.content"></div>
                </div>
                
                <!-- 回复内容 -->
                <div class="reply-content" v-html="reply.content"></div>
                
                <!-- 回复操作 -->
                <div class="reply-actions">
                  <el-button 
                    link
                    :type="reply.isVoted ? 'success' : 'default'" 
                    @click="handleVoteReply(reply)"
                  >
                    <el-icon><star /></el-icon>
                    {{ reply.isVoted ? '已赞' : '点赞' }} ({{ reply.votes }})
                  </el-button>
                  <el-button link @click="replyToComment(reply)">
                    <el-icon><chat-line-round /></el-icon>
                    回复
                  </el-button>
                  <el-button v-if="reply.author.id === currentUser.id || isAdmin" link type="danger" @click="confirmDeleteReply(reply)">
                    <el-icon><delete /></el-icon>
                    删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-replies">
            <el-empty description="暂无回复" :image-size="150">
              <template #description>
                <p>该话题下暂无回复，快来发表您的见解吧！</p>
              </template>
            </el-empty>
          </div>
          
          <!-- 回复分页 -->
          <div class="pagination-container" v-if="total > pageSize">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange"
            />
          </div>
        </div>

        <!-- 回复表单 -->
        <div class="reply-form-container" ref="replyFormRef">
          <h2 class="reply-form-title">发表回复</h2>
          
          <div class="quoted-info" v-if="replyTo">
            <div class="quoted-header">
              回复：{{ replyTo.author.name }}
              <el-button link type="primary" @click="cancelReply">取消回复</el-button>
            </div>
            <div class="quoted-text" v-html="replyTo.content"></div>
          </div>
          
          <div class="login-tip" v-if="!isLoggedIn">
            <el-alert
              title="您需要登录后才能发表回复"
              type="info"
              show-icon
              :closable="false"
            >
              <template #default>
                <el-button type="primary" @click="goToLogin">立即登录</el-button>
              </template>
            </el-alert>
          </div>
          
          <div v-else>
            <div class="editor-container">
              <el-input
                v-model="replyContent"
                type="textarea"
                :rows="6"
                placeholder="请输入回复内容，至少5个字符..."
                maxlength="2000"
                show-word-limit
              />
              <div class="length-tip" v-if="replyContent.length > 0 && replyContent.length < 5">
                <el-alert
                  title="回复内容至少需要5个字符"
                  type="warning"
                  :closable="false"
                  show-icon
                />
              </div>
            </div>
            <div class="form-actions">
              <el-button type="primary" :loading="submitting" :disabled="replyContent.length < 5" @click="submitReply">发表回复</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  View, 
  ChatLineRound, 
  Star, 
  Edit, 
  Delete 
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTopicDetail, getTopicReplies, createReply, likeTopic, likeReply, deleteTopic as deleteTopicApi, deleteReply as deleteReplyApi } from '@/api/forum'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import { getFullAvatarURL } from '@/utils/common'

const route = useRoute()
const router = useRouter()
const loading = ref(true)
const submitting = ref(false)
const replyFormRef = ref(null)

// 当前登录的用户
const currentUser = computed(() => {
  try {
    const userStr = localStorage.getItem('user')
    if (userStr) {
      return JSON.parse(userStr)
    }
  } catch (e) {
    console.error('解析用户信息失败', e)
  }
  return {}
})

// 是否登录
const isLoggedIn = computed(() => {
  return !!localStorage.getItem('token')
})

// 是否为作者
const isAuthor = computed(() => {
  return currentUser.value.id === topic.author?.id
})

// 是否为管理员
const isAdmin = computed(() => {
  return currentUser.value.role === 'ADMIN'
})

// 话题ID
const topicId = ref(parseInt(route.params.id))

// 话题信息
const topic = reactive({
  id: 0,
  title: '',
  content: '',
  author: {
    id: 0,
    name: '',
    avatar: ''
  },
  boardId: 0,
  boardName: '',
  views: 0,
  replies: 0,
  votes: 0,
  isTop: false,
  isEssence: false,
  createTime: '',
  publishTime: '',
  isVoted: false
})

// 回复相关
const replies = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const replySort = ref('time')
const replyContent = ref('')
const replyTo = ref(null)

// 获取话题详情
const fetchTopicDetail = async () => {
  loading.value = true
  try {
    const res = await getTopicDetail(topicId.value)
    if (res.code === 200) {
      // 设置话题信息
      Object.assign(topic, res.data)
      topic.publishTime = formatTime(topic.createTime)
      
      // 处理话题作者头像URL
      if (topic.author && topic.author.avatar) {
        topic.author.avatar = getFullAvatarURL(topic.author.avatar);
      }
      
      // 更新浏览量
      topic.views += 1
    }
  } catch (error) {
    console.error('获取话题详情失败', error)
    ElMessage.error('获取话题详情失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 获取回复列表
const fetchReplies = async () => {
  try {
    const res = await getTopicReplies(topicId.value, {
      page: currentPage.value,
      size: pageSize.value,
      sort: replySort.value
    })
    
    if (res.code === 200) {
      // 设置回复列表
      replies.value = res.data.records.map(reply => {
        // 确保reply.author不为null
        if (!reply.author) {
          reply.author = { name: '匿名用户', avatar: null }
        } else if (reply.author.avatar) {
          // 使用getFullAvatarURL处理头像URL
          reply.author.avatar = getFullAvatarURL(reply.author.avatar);
        }
        
        // 处理引用回复的作者头像
        if (reply.quoted && reply.quoted.author && reply.quoted.author.avatar) {
          reply.quoted.author.avatar = getFullAvatarURL(reply.quoted.author.avatar);
        }
        
        return {
          ...reply,
          publishTime: formatTime(reply.createTime)
        }
      })
      
      // 设置分页信息
      total.value = res.data.total
    }
  } catch (error) {
    console.error('获取回复列表失败', error)
    ElMessage.error('获取回复列表失败，请稍后重试')
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  try {
    return formatDistanceToNow(new Date(timestamp), { addSuffix: true, locale: zhCN })
  } catch (error) {
    console.error('时间格式化错误', error)
    return ''
  }
}

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchReplies()
}

// 点赞话题
const handleVoteTopic = async () => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录后再进行点赞操作')
    return
  }
  
  try {
    if (topic.isVoted) {
      // 已点赞，取消点赞
      // 这里应该调用取消点赞的API
      topic.votes -= 1
      topic.isVoted = false
    } else {
      // 未点赞，添加点赞
      const res = await likeTopic(topicId.value)
      if (res.code === 200) {
        topic.votes += 1
        topic.isVoted = true
        ElMessage.success('点赞成功')
      }
    }
  } catch (error) {
    console.error('点赞操作失败', error)
    ElMessage.error('点赞操作失败，请稍后重试')
  }
}

// 点赞回复
const handleVoteReply = async (reply) => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录后再进行点赞操作')
    return
  }
  
  try {
    if (reply.isVoted) {
      // 已点赞，取消点赞
      // 这里应该调用取消点赞的API
      reply.votes -= 1
      reply.isVoted = false
    } else {
      // 未点赞，添加点赞
      const res = await likeReply(reply.id)
      if (res.code === 200) {
        reply.votes += 1
        reply.isVoted = true
        ElMessage.success('点赞成功')
      }
    }
  } catch (error) {
    console.error('点赞操作失败', error)
    ElMessage.error('点赞操作失败，请稍后重试')
  }
}

// 回复某人的评论
const replyToComment = (reply) => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录后再进行回复操作')
    return
  }
  
  replyTo.value = reply
  scrollToReplyForm()
}

// 取消回复
const cancelReply = () => {
  replyTo.value = null
}

// 滚动到回复表单
const scrollToReplyForm = () => {
  nextTick(() => {
    if (replyFormRef.value) {
      replyFormRef.value.scrollIntoView({ behavior: 'smooth' })
      // 添加一点延迟，确保滚动完成后聚焦
      setTimeout(() => {
        const textarea = replyFormRef.value.querySelector('textarea')
        if (textarea) {
          textarea.focus()
        }
      }, 500)
    }
  })
}

// 提交回复
const submitReply = async () => {
  if (!replyContent.value.trim()) {
    ElMessage.warning('回复内容不能为空')
    return
  }
  
  // 添加内容长度验证
  if (replyContent.value.trim().length < 5) {
    ElMessage.warning('回复内容至少需要5个字符')
    return
  }
  
  submitting.value = true
  try {
    const data = {
      topicId: topicId.value,
      content: replyContent.value,
      parentId: replyTo.value ? replyTo.value.id : null
    }
    
    console.log('[DEBUG] 发送回复内容:', data)
    const res = await createReply(data)
    if (res.code === 200) {
      ElMessage.success('回复发表成功')
      replyContent.value = ''
      replyTo.value = null
      topic.replies += 1
      
      // 重新加载回复列表
      currentPage.value = 1
      fetchReplies()
    }
  } catch (error) {
    console.error('回复发表失败', error)
    
    // 显示更详细的错误信息
    if (error.response && error.response.data) {
      console.error('[DEBUG] 详细错误信息:', error.response.data)
      if (error.response.data.message) {
        ElMessage.error(error.response.data.message)
      } else {
        ElMessage.error('回复发表失败：' + (error.message || '未知错误'))
      }
    } else {
      ElMessage.error('回复发表失败，请稍后重试')
    }
  } finally {
    submitting.value = false
  }
}

// 编辑话题
const editTopic = () => {
  router.push(`/forum/edit/${topicId.value}`)
}

// 确认删除话题
const confirmDeleteTopic = () => {
  ElMessageBox.confirm(
    '确定要删除该话题吗？删除后无法恢复。',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  .then(() => {
    deleteTopic()
  })
  .catch(() => {
    // 用户取消删除
  })
}

// 删除话题
const deleteTopic = async () => {
  try {
    console.log(`[DEBUG] 开始删除话题，ID: ${topicId.value}`)
    const res = await deleteTopicApi(topicId.value)
    console.log(`[DEBUG] 删除话题响应:`, res)
    
    if (res.code === 200) {
      ElMessage.success('话题删除成功')
      // 添加时间戳参数，强制页面刷新
      const timestamp = new Date().getTime()
      router.push(`/forum/boards/${topic.boardId}?refresh=${timestamp}`)
    } else {
      ElMessage.error('话题删除失败：' + (res.msg || '未知错误'))
    }
  } catch (error) {
    console.error('[DEBUG] 话题删除失败，错误详情:', error)
    console.error('[DEBUG] 错误响应:', error.response ? error.response.data : '无响应数据')
    ElMessage.error('话题删除失败，请稍后重试')
  }
}

// 确认删除回复
const confirmDeleteReply = (reply) => {
  ElMessageBox.confirm(
    '确定要删除该回复吗？删除后无法恢复。',
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  .then(() => {
    deleteReply(reply)
  })
  .catch(() => {
    // 用户取消删除
  })
}

// 删除回复
const deleteReply = async (reply) => {
  try {
    console.log(`[DEBUG] 开始删除回复，ID: ${reply.id}`)
    const res = await deleteReplyApi(reply.id)
    console.log(`[DEBUG] 删除回复响应:`, res)
    
    if (res.code === 200) {
      ElMessage.success('回复删除成功')
      
      // 手动从当前列表中移除已删除的回复
      replies.value = replies.value.filter(item => item.id !== reply.id)
      
      // 减少话题的回复计数
      topic.replies -= 1
      
      // 更新总数
      total.value = Math.max(0, total.value - 1)
      
      // 如果当前页已经没有回复了且不是第一页，则加载前一页
      if (replies.value.length === 0 && currentPage.value > 1) {
        currentPage.value -= 1
        fetchReplies()
      }
    } else {
      ElMessage.error('回复删除失败：' + (res.msg || '未知错误'))
    }
  } catch (error) {
    console.error('[DEBUG] 回复删除失败，错误详情:', error)
    console.error('[DEBUG] 错误响应:', error.response ? error.response.data : '无响应数据')
    ElMessage.error('回复删除失败，请稍后重试')
  }
}

// 去登录页
const goToLogin = () => {
  router.push({
    path: '/auth/login',
    query: { redirect: route.fullPath }
  })
}

// 监听排序方式变化
watch(replySort, () => {
  currentPage.value = 1
  fetchReplies()
})

onMounted(() => {
  fetchTopicDetail()
  fetchReplies()
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.topic-detail-page {
  padding: var(--spacing-xl) 0;
  background-color: var(--bg-light);
  min-height: calc(100vh - 60px);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

// 加载状态
.loading-container {
  padding: var(--spacing-xl);
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-sm);
}

// 导航面包屑
.breadcrumb {
  margin-bottom: var(--spacing-md);
}

// 话题主体
.topic-main {
  background-color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--box-shadow-sm);
  margin-bottom: var(--spacing-lg);
  
  .topic-header {
    margin-bottom: var(--spacing-lg);
    
    .topic-title {
      font-size: 1.8rem;
      font-weight: 700;
      margin: 0 0 var(--spacing-md);
      color: var(--text-primary);
      
      .tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 500;
        margin-right: var(--spacing-xs);
        vertical-align: middle;
        
        &.top {
          background-color: var(--color-danger-light);
          color: var(--color-danger);
        }
        
        &.essence {
          background-color: var(--color-success-light);
          color: var(--color-success);
        }
      }
    }
    
    .topic-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .author-info {
        display: flex;
        align-items: center;
        
        .author-avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: var(--spacing-md);
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-primary);
            color: white;
            font-size: 1.5rem;
            font-weight: 500;
          }
        }
        
        .author-detail {
          .author-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
          }
          
          .publish-time {
            font-size: 0.9rem;
            color: var(--text-light);
          }
        }
      }
      
      .topic-stats {
        display: flex;
        gap: var(--spacing-lg);
        
        .stat {
          display: flex;
          align-items: center;
          color: var(--text-secondary);
          
          .el-icon {
            margin-right: var(--spacing-xs);
            color: var(--color-primary);
          }
        }
      }
    }
  }
  
  .topic-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    overflow-wrap: break-word;
    
    // 这里定义富文本内容的样式
    :deep(p) {
      margin-bottom: 1em;
    }
    
    :deep(img) {
      max-width: 100%;
      height: auto;
      margin: 1em 0;
    }
    
    :deep(a) {
      color: var(--color-primary);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
    
    :deep(pre) {
      background-color: #f6f8fa;
      border-radius: 6px;
      padding: 16px;
      overflow: auto;
      margin: 1em 0;
    }
    
    :deep(code) {
      font-family: monospace;
      background-color: #f6f8fa;
      padding: 2px 4px;
      border-radius: 4px;
    }
    
    :deep(blockquote) {
      border-left: 4px solid var(--color-primary-light);
      padding-left: 1em;
      color: var(--text-secondary);
      margin: 1em 0;
    }
  }
  
  .topic-actions {
    display: flex;
    gap: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
  }
}

// 回复列表
.replies-container {
  background-color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--box-shadow-sm);
  margin-bottom: var(--spacing-lg);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    
    .section-title {
      font-size: 1.4rem;
      font-weight: 600;
      margin: 0;
      color: var(--text-primary);
    }
  }
  
  .reply-list {
    .reply-item {
      display: flex;
      padding: var(--spacing-md) 0;
      border-bottom: 1px solid var(--border-color);
      
      &:last-child {
        border-bottom: none;
      }
      
      .reply-author {
        flex-shrink: 0;
        width: 150px;
        
        .author-avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: var(--spacing-sm);
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-primary);
            color: white;
            font-size: 1.5rem;
            font-weight: 500;
          }
        }
        
        .author-detail {
          .author-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
          }
          
          .reply-time {
            font-size: 0.9rem;
            color: var(--text-light);
          }
        }
      }
      
      .reply-body {
        flex-grow: 1;
        
        .quoted-reply {
          background-color: var(--bg-light);
          border-radius: var(--border-radius-sm);
          padding: var(--spacing-md);
          margin-bottom: var(--spacing-md);
          
          .quoted-author {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-xs);
          }
          
          .quoted-content {
            color: var(--text-secondary);
            font-size: 0.95rem;
            
            // 限制引用内容高度
            max-height: 100px;
            overflow: hidden;
            position: relative;
            
            &::after {
              content: "";
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 30px;
              background: linear-gradient(transparent, var(--bg-light));
            }
          }
        }
        
        .reply-content {
          font-size: 1rem;
          line-height: 1.6;
          color: var(--text-primary);
          margin-bottom: var(--spacing-md);
          overflow-wrap: break-word;
          
          // 富文本样式
          :deep(p) {
            margin-bottom: 1em;
          }
          
          :deep(img) {
            max-width: 100%;
            height: auto;
            margin: 0.5em 0;
          }
        }
        
        .reply-actions {
          display: flex;
          gap: var(--spacing-md);
        }
      }
    }
  }
  
  .empty-replies {
    padding: var(--spacing-xl) 0;
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
  }
}

// 回复表单
.reply-form-container {
  background-color: white;
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--box-shadow-sm);
  
  .reply-form-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md);
    color: var(--text-primary);
  }
  
  .quoted-info {
    background-color: var(--bg-light);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    
    .quoted-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-xs);
      font-weight: 500;
    }
    
    .quoted-text {
      color: var(--text-secondary);
      font-size: 0.95rem;
      max-height: 80px;
      overflow: hidden;
      position: relative;
      
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background: linear-gradient(transparent, var(--bg-light));
      }
    }
  }
  
  .login-tip {
    margin-bottom: var(--spacing-md);
  }
  
  .editor-container {
    margin-bottom: var(--spacing-md);
    
    .length-tip {
      margin-top: 8px;
    }
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .topic-main {
    .topic-header {
      .topic-meta {
        flex-direction: column;
        align-items: flex-start;
        
        .author-info {
          margin-bottom: var(--spacing-md);
        }
        
        .topic-stats {
          width: 100%;
          justify-content: space-between;
        }
      }
    }
    
    .topic-actions {
      flex-wrap: wrap;
      gap: var(--spacing-sm);
    }
  }
  
  .replies-container {
    .reply-list {
      .reply-item {
        flex-direction: column;
        
        .reply-author {
          display: flex;
          align-items: center;
          width: 100%;
          margin-bottom: var(--spacing-md);
          
          .author-avatar {
            margin-bottom: 0;
            margin-right: var(--spacing-md);
          }
        }
      }
    }
  }
}
</style> 